<template>
  <div class="page-container">
    <!-- 头部 -->
    <div class="header">
      <div class="header-left">
        <div class="header-icon">
          <i class="fas fa-calendar-check"></i>
        </div>
        <h1 class="header-title">咨询预约记录</h1>
      </div>
      <div class="header-right">
        <button class="header-btn">
          <i class="fas fa-sync-alt"></i>
        </button>
        <button class="header-btn">
          <i class="fas fa-filter"></i>
        </button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-container">
        <div class="search-icon">
          <i class="fas fa-search"></i>
        </div>
        <input
          type="text"
          class="search-input"
          placeholder="搜索咨询师、个案编号或主题..."
          v-model="searchTerm"
          @input="handleSearch"
        />
      </div>

      <div class="filter-container">
        <button
          v-for="(filter, index) in filters"
          :key="index"
          :class="['filter-btn', { active: activeFilter === filter.value }]"
          @click="applyFilter(filter.value)"
        >
          {{ filter.label }}
        </button>
      </div>
    </div>

    <!-- 预约列表 -->
    <div class="appointment-list">
      <div
        v-for="appointment in filteredAppointments"
        :key="appointment.id"
        class="appointment-card fade-in"
      >
        <div class="card-header">
          <div class="consultant-info">
            <div class="consultant-avatar">
              {{ appointment.consultantSurname }}
            </div>
            <div class="consultant-details">
              <h3 class="consultant-name">{{ appointment.consultantName }}</h3>
              <p class="consultant-title">{{ appointment.consultantTitle }}</p>
            </div>
          </div>
          <span class="case-id">{{ appointment.caseId }}</span>
        </div>

        <div class="card-content">
          <div class="session-info">
            <i class="fas fa-comment-dots"></i>
            <h4 class="session-title">{{ appointment.sessionTitle }}</h4>
          </div>
          <div class="time-info">
            <i class="far fa-calendar"></i>
            <span class="session-time">{{ appointment.sessionTime }}</span>
          </div>
        </div>

        <div class="card-footer">
          <span :class="['status-badge', appointment.statusClass]">{{
            appointment.statusText
          }}</span>
          <button class="action-btn">{{ appointment.actionText }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppointmentList",
  data() {
    return {
      searchTerm: "",
      activeFilter: "all",
      filters: [
        { label: "全部记录", value: "all" },
        { label: "待开始", value: "pending" },
        { label: "已完成", value: "completed" },
        { label: "已取消", value: "canceled" },
        { label: "本周", value: "week" },
        { label: "本月", value: "month" },
      ],
      appointments: [
        {
          id: 1,
          consultantSurname: "李",
          consultantName: "李明华 博士",
          consultantTitle: "资深心理咨询师",
          caseId: "CAS-20230815-001",
          sessionTitle: "婚姻关系危机干预 - 第三次咨询",
          sessionTime: "2023年8月15日 14:30 - 16:00",
          statusClass: "status-completed",
          statusText: "已完成",
          actionText: "查看详情",
          status: "completed",
        },
        {
          id: 2,
          consultantSurname: "王",
          consultantName: "王思雨 教授",
          consultantTitle: "临床心理学专家",
          caseId: "CAS-20230820-005",
          sessionTitle: "青少年抑郁情绪管理",
          sessionTime: "2023年8月20日 10:00 - 11:30",
          statusClass: "status-pending",
          statusText: "待开始",
          actionText: "修改预约",
          status: "pending",
        },
        {
          id: 3,
          consultantSurname: "张",
          consultantName: "张伟 主任",
          consultantTitle: "注册心理治疗师",
          caseId: "CAS-20230810-012",
          sessionTitle: "职业倦怠与工作压力咨询",
          sessionTime: "2023年8月10日 15:00 - 16:30",
          statusClass: "status-canceled",
          statusText: "已取消",
          actionText: "重新预约",
          status: "canceled",
        },
        {
          id: 4,
          consultantSurname: "陈",
          consultantName: "陈丽萍 博士",
          consultantTitle: "家庭治疗专家",
          caseId: "CAS-20230822-003",
          sessionTitle: "亲子关系冲突解决",
          sessionTime: "2023年8月22日 09:00 - 10:30",
          statusClass: "status-pending",
          statusText: "待开始",
          actionText: "修改预约",
          status: "pending",
        },
        {
          id: 5,
          consultantSurname: "赵",
          consultantName: "赵天成 教授",
          consultantTitle: "创伤治疗专家",
          caseId: "CAS-20230805-007",
          sessionTitle: "PTSD干预治疗 - 第四次咨询",
          sessionTime: "2023年8月5日 13:00 - 15:00",
          statusClass: "status-completed",
          statusText: "已完成",
          actionText: "查看报告",
          status: "completed",
        },
      ],
    };
  },
  computed: {
    filteredAppointments() {
      let filtered = this.appointments;
      // 应用状态筛选
      if (this.activeFilter !== "all") {
        filtered = filtered.filter((app) => app.status === this.activeFilter);
      }
      // 应用搜索
      if (this.searchTerm) {
        const term = this.searchTerm.toLowerCase();
        filtered = filtered.filter(
          (app) =>
            app.consultantName.toLowerCase().includes(term) ||
            app.caseId.toLowerCase().includes(term) ||
            app.sessionTitle.toLowerCase().includes(term)
        );
      }

      return filtered;
    },
  },
  methods: {
    applyFilter(filter) {
      this.activeFilter = filter;
    },
    handleSearch() {
      // 搜索逻辑已在计算属性中处理
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.page-container {
  max-width: 28rem;
  margin: 0 auto;
  background-color: #ffffff;
  min-height: 100vh;
  font-family: "Noto Sans SC", sans-serif;
  color: #1e293b;
}

/* 头部样式 */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background-color: #e0e7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  font-size: 1.25rem;
}

.header-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.header-right {
  display: flex;
  gap: 0.75rem;
}

.header-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #e0e7ff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  cursor: pointer;
}

/* 搜索和筛选样式 */
.search-section {
  padding: 1rem;
}

.search-container {
  position: relative;
  margin-bottom: 1rem;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border-radius: 0.5rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.filter-container {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.filter-btn.active {
  background-color: #4f46e5;
  color: #ffffff;
}

/* 预约卡片样式 */
.appointment-list {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.appointment-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.consultant-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.consultant-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.consultant-details h3 {
  font-weight: 600;
  margin: 0;
  font-size: 1rem;
}

.consultant-details p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.case-id {
  font-size: 0.75rem;
  background-color: #e0e7ff;
  color: #4f46e5;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.card-content {
  margin-bottom: 1rem;
}

.session-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.session-info i {
  color: #6366f1;
}

.session-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.time-info i {
  color: #6366f1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-completed {
  background-color: #ecfdf5;
  color: #059669;
}

.status-pending {
  background-color: #fef3c7;
  color: #d97706;
}

.status-canceled {
  background-color: #fee2e2;
  color: #dc2626;
}

.action-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #e0e7ff;
  color: #4f46e5;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
